<template>
  <Modal v-model="modal.show" v-bind="modal" @on-ok="save" @on-cancel="closeModal">
      <Form ref="formValidate" :model="formValidate"  :label-width="120" :rules="ruleValidate">
        <FormItem label="供应商名称" prop="name">
          <Input id="formItemName" v-model="formValidate.name" placeholder="请输入供应商名称"></Input>
      </FormItem>
      <FormItem label="统—社会信用代码" prop="code">
          <Input id="formItemCode" v-model="formValidate.code" placeholder="请输入统—社会信用代码"></Input>
      </FormItem>
      <FormItem label="联系人电话" prop="tel">
        <Input id="formItemTel" v-model="formValidate.tel" placeholder="请输入联系人电话"></Input>
      </FormItem>
      <FormItem label="官网" prop="site">
        <Input id="formItemSite" v-model="formValidate.site" placeholder="请输入类似http://www.abc.com或者http://192.168.1.1"></Input>
      </FormItem>
      <FormItem label="邮箱" prop="email">
        <Input id="formItemEmail" v-model.trim="formValidate.email" placeholder="请输入邮箱"></Input>
      </FormItem>
      <FormItem label="通讯地址" prop="address">
        <Input id="formItemAddress" v-model="formValidate.address" placeholder="请输入通讯地址"></Input>
      </FormItem>
      <FormItem label="税号" prop="taxCode">
        <Input id="formItemTaxCode" v-model="formValidate.taxCode" placeholder="请输入税号"></Input>
      </FormItem>
      <FormItem label="开发票电话" prop="mobile">
        <Input id="formItemMobile"  v-model="formValidate.mobile" placeholder="请输入开发票电话"></Input>
      </FormItem>
      <FormItem label="开户银行" prop="depositBank">
        <!-- <Input  v-model="formValidate.depositBank" placeholder="请输入开户银行"></Input> -->
        <Select filterable id="formItemDepositBank" v-model="formValidate.depositBank">
            <Option v-for="bank in allBankList" :key="bank.dictid" :value="bank.dictid">{{bank.dictname}}</Option>
        </Select>
      </FormItem>
      <FormItem label="开户银行账户" prop="bankAccount">
        <Input id="formItemBankAccount" v-model="formValidate.bankAccount" placeholder="请输入开户银行账户"></Input>
      </FormItem>
      <FormItem label="简介" prop="intro">
        <Input id="formItemIntro" type="textarea" v-model="formValidate.intro" placeholder="请输入简介"></Input>
      </FormItem>
      <FormItem label="logo" prop="logo" key="logo">
        <itemUpload id="formItemLogo" ref="logoUpload"  @upload-success="val=>uploadSuccess(val)" :formatArr="['jpg','png','jpeg']" 
          uploadText="上传图片"  @del-item="setClear()"
          fileType="images" :fileList="logoList"></itemUpload>
      </FormItem>
      </Form>
  </Modal>
</template>

<script>
import itemUpload from '@/components/item-upload/index.vue'
import {addVendor,updateVendor} from './api/factory.js'
import {validatePhone,validateSite,validateEmail} from '@/libs/reg.js'
import { mapState,mapActions } from 'vuex'
import dictMixin from '@/mixin/dictMixin'
export default {
  name:'addTestFatoryModal',
  components: { itemUpload },
  mixins:[dictMixin],
  props:{
    title:{
      type:String,
      default:"供应商"
    }
  },
  data(){
    return {
      logoList:[],
      modal:{
        show:false,
        loading:true,
        title:'创建供应商',
        'mask-closable':false,
        closable:false
      },
      formValidate:{
        name:'',
        code:'',
        tel:'',
        site:'',
        email:'',
        address:'',
        intro:'',
        logo:'',
        taxCode:'',
        mobile:'',
        depositBank:'',
        bankAccount:'',
      },
      ruleValidate:{
          name:[
            { required: true, message: '请输入供应商名称', trigger: 'blur' }
          ],
          code:[
            { required: true, message: '请输入统—社会信用代码', trigger: 'blur' }
          ],
          tel:[
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          site:[
            { validator: validateSite, trigger: 'blur' }
          ],
          email:[
            { required: true, message:'请输入邮箱', trigger: 'blur' },
            {validator: validateEmail,trigger:'blur'}
          ],
          address:[
            { required: true, message: '请输入通讯地址', trigger: 'blur' }
          ],
          taxCode:[
            { required: true, message: '请输入税号', trigger: 'blur' }
          ],
          mobile:[
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          depositBank:[
            { required: true, message: '请选择开户银行', trigger: 'change' }
          ],
          bankAccount:[
            { required: true, message: '请输入开户银行账户', trigger: 'blur' }
          ],      
      },
      allBankList:[]
    }
  },
  computed:{
    
  },
  async mounted(){
    this._formValidate = this.formValidate;
    let { data } = await this.getDictByName('bank');
    this.allBankList = data;
  },
  methods:{
    openModal(params){
      //表单作用域
      this.modal.show = true;
      this.op = params ? 'update' : 'add';
      this.opTxt = params ? '修改' : '创建';
      this.modal.title = `${this.opTxt}${this.title}`;
      if(params){
        this.formValidate = {...params};
        this.logoList = [{
          path: params.logo
        }];
      }else{
        this.initData();
      }
    },
    save() {
      this.$refs.formValidate
        .validate((valid) => {
          if (valid) {
            let params = {
              ...this.formValidate
            };
            let reqApi = this.op === 'update' ? updateVendor : addVendor;
            //修改任务
            reqApi(params)
              .then(({ code, data, message }) => {
                if (code == 1) {
                  this.$Message.info(this.modal.title + '成功');
                  this.closeModal();
                  this.$emit('ok', this.op);
                } else {
                  this.$Message.error(message);
                }
              })
              .catch((e) => {
                this.$Message.error(this.modal.title + '失败');
              })
              .finally(() => {
                this.cancelLoading();
              });
          } else {
            this.cancelLoading();
          }
        })
        .catch((error) => {
          this.cancelLoading();
        });
    },
    closeModal() {
      this.modal.show = false;
      this.$emit('close');
      this.resetField();
    },
    cancelLoading() {
      this.modal.loading = false;
      setTimeout(() => {
        this.modal.loading = true;
      });
    },
    initData() {
      this.formValidate = { ...this._formValidate };
    },
    resetField() {
      this.initData();
      this.$refs.formValidate.resetFields();
    },
    uploadSuccess(file){
      this.formValidate.logo = file.filePath;
      this.logoList = [
        {
          id: file.fileId,
          fileName: file.fileName,
          path: file.filePath
        }
      ];
    },
    setClear(){
      this.formValidate.logo = '';
      this.logoList = [];
    },
  }
}
</script>

<style>

</style>